<template>
	<view class="content">
		<view class="aaa">
			<view class="Topbox" :style="'height:'+(cachet_Top-7)+'px'"></view>
			<!-- 头部定位 -->
			<view class="fixed_position " :style="'height:'+cachet_Height+'px;'+'line-height:'+cachet_Height+'px;'">
				<u-icon @click="ontoCity" name="map" :label="locations" color="#ffffff" label-color="#ffffff"
					:label-size="cachet_Height" :size="cachet_Height"></u-icon>
			</view>
			<!-- 搜索框 -->
			<view class="Searchbox">
				<view class="Search">
					<u-search @focus="OntoSearch" shape="round" :clearabled="true" :show-action="false"
						v-model="Search"></u-search>
				</view>
			</view>
		</view>

		<!-- scroll-view -->
		<view class="scroll_view">
			<scroll-view scroll-y="true" class="scroll-Y">
				<!-- 工种分类 -->
				<view class="Kindbox">
					<view class="Kind" v-for="item,index in KindArr" :key="index">
						<view class="Kind_icon">
							<image :src="item.Kind_icon"></image>
						</view>
						<view class="Kind_name">{{item.Kind_name}}</view>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="wrap">
					<u-swiper :list="list"></u-swiper>
				</view>
				<!-- 职工推荐 -->
				<view class="workers ">
					<view>
						<span>职工推荐</span>
						<view></view>
					</view>
					<!-- 热门员工 -->
					<view class="workersArr">
						<view v-for="item,index in workArr" :key="index" @click="ontoEmployee(index)">
							<view>
								<image :src="item"></image>
								<view>热门员工 &nbsp;&nbsp;点击咨询</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-modal v-model="show" :content="content" :async-close="true" :mask-close-able="true" show-cancel-button="true" @confirm="confirm">
		</u-modal>
	</view>
</template>

<script>
	var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		onLoad: function(option) {
			console.log(option.Location);
		},
		data() {
			return {
				// 头部胶囊的各个位置高宽
				cachet_Top: "",
				cachet_Bottom: "",
				cachet_Height: "",
				cachet_Width: "",
				cachet_Left: "",
				cachet_Right: "",
				// 搜索双向绑定
				Search: "",
				// 工种分类
				KindArr: [{
					Kind_icon: "/static/kind_icon/未标23_画板 1.png",
					Kind_name: "日常保洁"
				}, {
					Kind_icon: "/static/kind_icon/753_画板 1.png",
					Kind_name: "深度保洁"
				}, {
					Kind_icon: "/static/kind_icon//456_画板 1.png",
					Kind_name: "做饭阿姨"
				}, {
					Kind_icon: "/static/kind_icon//475_画板 1.png",
					Kind_name: "放心搬家"
				}, {
					Kind_icon: "/static/kind_icon//未标题-3_画板 1.png",
					Kind_name: "家具维修"
				}, {
					Kind_icon: "/static/kind_icon//156_画板 1.png",
					Kind_name: "日常维修"
				}, {
					Kind_icon: "/static/kind_icon//未标题-2_画板 1.png",
					Kind_name: "钟点工"
				}, {
					Kind_icon: "/static/kind_icon//1_画板 1_画板 1.png",
					Kind_name: "洗衣放鞋"
				}, {
					Kind_icon: "/static/kind_icon//123_画板 1.png",
					Kind_name: "清洁保养"
				}, {
					Kind_icon: "/static/kind_icon//459_画板 1.png",
					Kind_name: "限时特惠"
				}],
				// 轮播图
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				// 职工推荐
				workArr: [
					"https://img1.baidu.com/it/u=2611288825,2656613176&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=500",
					"https://img1.baidu.com/it/u=3489122000,4250607006&fm=253&fmt=auto&app=138&f=PNG?w=500&h=457",
					"https://img0.baidu.com/it/u=1436734067,4095954709&fm=253&fmt=auto&app=138&f=PNG?w=442&h=450",
					"https://img1.baidu.com/it/u=3599426717,552444851&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=514"
				],
				locations: "未获取到定位",
				show: false,
				content: '请求获取定位信息，以便更好的体验',
			}
		},
		onLoad() {
			// 获取头部胶囊的信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.cachet_Top = menuButtonInfo.top;
			this.cachet_Bottom = menuButtonInfo.bottom;
			this.cachet_Height = menuButtonInfo.height;
			this.cachet_Width = menuButtonInfo.width;
			this.cachet_Left = menuButtonInfo.left;
			this.cachet_Right = menuButtonInfo.right;
			// console.log(menuButtonInfo.top);
		},
		methods: {
			// 点击获取位置弹窗按钮
			confirm() {
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						let lat = res.latitude;
						let lon = res.longitude;
						qqmapsdk = new QQMapWX({
							key: '55FBZ-EVLKO-EDNWY-S2MPR-IRNCO-WRBGQ'
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: lat,
								longitude: lon
							},
					 	success: (res) => {
							 _this.locations = res.result.ad_info.city;
							 _this.show=false;
							 	uni.setStorageSync('location', _this.locations);
							}
						})
						uni.showToast({
							title: '获取地址成功',
							icon: 'none'
						});
					},
					fail: function() {
				
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				})
			
			
			},
			// 跳转搜索页
			OntoSearch() {
				uni.navigateTo({
					url: '/pages/index/search',
				});
			},
			// 跳转定位城市
			ontoCity() {
				uni.navigateTo({
					url: '/pages/index/City',
				});
			},
		// 跳转员工详情
			ontoEmployee(index) {
				uni.navigateTo({
					url: '/pages/index/Employee_Details?information='+this.workArr[index],
				});
			},


		},
		onShow() {
			const value = uni.getStorageSync('location');
			this.locations = value;
             if(this.locations=="未获取到定位" || this.locations==""){
				 this.show=true;
			 }
		}
	}
</script>

<style scoped>
	.aaa {
		position: fixed;
		z-index: 99;
		background-color: #54BCBD;
		width: 100%;
		height: 250rpx;
		top: 0;
	}

	.workersArr>view>view {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.workersArr>view>view>view {
		background-color: red;
		color: white;
		font-weight: bolder;
		width: 300rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.workersArr>view>view>image {
		height: 400rpx;
		width: 300rpx;
		margin-top: 20rpx;
	}

	.workersArr>view {
		border-radius: 20rpx;
		width: 350rpx;
		height: 500rpx;

		margin-top: 70rpx;
		background-color: #54BCBD;

	}

	.workersArr {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.workers>view:nth-of-type(1)>view {
		border: 1px solid red;
		width: 110rpx;
	}

	.workers>view:nth-of-type(1) {
		margin-left: 50rpx;
		font-weight: bolder;
	}

	.workers {
		background-color: white;
		/* height: 100%; */
		padding-top: 30rpx;
	}

	.scroll_view {
		/* height: 100%; */
		margin-top: 250rpx;

	}

	.scroll-Y {
		height: 100%;
		/* border: 1px solid red; */
	}

	.Kind {
		height: 150rpx;
		width: 150rpx;
		text-align: center;
	}

	.Kind_icon image {
		height: 100rpx;
		width: 100rpx;

	}

	/*   .Kindbox>.Kind:nth-of-type(10)>.Kind_icon>image{
	   border: 1px solid red;
   } */
	.Kindbox {
		height: 400rpx;
		border-radius: 70rpx 70rpx 0rpx 0rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.Search {
		width: 670rpx;
	}

	.Searchbox {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}

	.fixed_position {
		margin-top: 7px;
		margin-left: 30rpx;
	}

	.Topbox {
		background-color: white;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #54BCBD;
	}

	page {
		height: 100%;
	}
</style>
